<template>
	<div class="home dark:bg-gray-800">

		<div class="flex items-start justify-between">
			<a-card hoverable style="width: 400px; margin-right: 10px">
				<div class="chart-box" ref="echartsRef"></div>
			</a-card>
		</div>
	</div>
</template>
<script lang="ts" setup>
import useEcharts from "@/hooks/useEcharts";
import { ref, Ref } from "vue";
const echartsRef = ref<HTMLDivElement | null>();
const { setOptions } = useEcharts(echartsRef as Ref<HTMLDivElement>);

setOptions({
	title: { show: false },
	tooltip: { trigger: "item", show: false },
	legend: { show: false },
	toolbox: { show: false },
	visualMap: {
		type: "piecewise",
		left: 0,
		itemWidth: 30,
		itemHeight: 10,
		calculable: true,
		inRange: {
			color: ["rgba(159,205,253,0.50)", "#60ACFC"]
		},
		outOfRange: {
			color: ["#eeeeee"]
		},
		pieces: [
			{ min: 1000 },
			{ min: 500, max: 999 },
			{ min: 200, max: 499 },
			{ min: 100, max: 199 },
			{ min: 10, max: 99 },
			{ min: 1, max: 9 }
		]
	},
	series: [
		{
			name: "实习单位",
			type: "map",
			map: "china",
			left: "center",
			top: "0px",
			width: "80%",
			mapValueCalculation: "sum",
			zoom: 1,
			roam: false,
			selectedMode: false,
			showLegendSymbol: false,
			emphasis: {
				label: {
					show: false,
					color: "#666"
				},
				itemStyle: {
					areaColor: "#e5e5e5"
				}
			},
			itemStyle: {
				areaColor: "#e5e5e5",
				borderColor: "#ffffff",
				borderWidth: 1
			},
			data: [{ name: '1', value: 1 },{ name: '2', value: 2 }]
		}
	]
});

</script>

<style lang="less" scoped>
.home {
	font-size: 24px;
	.home2 {
		color: @primary-color;
	}
}
.chart-box {
	width: 100%;
	height: 280px;
}
</style>
